<template>
  <div class="cartDetail">
    <van-checkbox-group v-model="checked" @change="singleSelect">
      <div v-for="(item, index) in store.state.cartList" :key="index">
        <ListItem
          :FoodItem="item"
          :handleChange="handleChange"
          :isCheckBox="true"
        ></ListItem>
      </div>
    </van-checkbox-group>
    <van-submit-bar
      class="submitOrder"
      :price="allprice"
      button-text="提交订单"
      button-color="#ffc400"
      @submit="onSubmit"
      v-if="!store.state.isBuy"
    >
      <van-checkbox
        v-model="checkedAll"
        checked-color="#ffc400"
        @click="selectAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <div class="buy" v-else>
      <div class="left">
        <van-checkbox
          v-model="checkedAll"
          checked-color="#ffc400"
          @click="selectAll"
          >全选</van-checkbox
        >
      </div>
      <div class="right">
        <van-button
          type="primary"
          size="normal"
          color="#ffc400"
          round
          @click="deleteShop"
          >删除</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import ListItem from "@/components/ListItem.vue";
import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { showToast } from "vant";
import { useRouter } from "vue-router";
const { changeShow } = defineProps(["changeShow"]);
const store = useStore();
const router = useRouter();
let checked = ref([]);
// 控制全选状态
let checkedAll = ref(true);
// 确保在购物车页点击步进器，能同步修改store的数据里cartList的num数据
function handleChange(value, detail) {
  console.log(value, detail);
  store.state.cartList.forEach((item) => {
    // 点击的id值与复选框的name绑定的id值一样
    if (item.id === detail.name) {
      item.num = value;
    }
  });
}
// 处理加入购物车后复选框全选问题
function init() {
  checked.value = store.state.cartList.map((item) => item.id);
}
// 单选
function singleSelect(result) {
  // console.log(result);
  if (result.length !== store.state.cartList.length) {
    checkedAll.value = false;
  } else {
    checkedAll.value = true;
  }
  // 更新选中的商品
  checked.value = result;
}

// 全选
function selectAll() {
  if (checked.value.length !== store.state.cartList.length) {
    init();
  } else {
    checked.value = [];
  }
}

function deleteLogic(type) {
  return store.state.cartList.filter((item) => {
    return type === "delete"
      ? !checked.value.includes(item.id)
      : checked.value.includes(item.id);
  });
}

// 合计
let allprice = computed(() => {
  let sum = 0;
  const newList = deleteLogic();
  newList.forEach((item) => {
    sum += item.num * item.price;
  });
  return sum * 100;
});

// 删除商品
function deleteShop() {
  const value = deleteLogic("delete");
  store.commit("DELETESHOP", value);
  if (!store.state.cartList.length) {
    changeShow();
    store.commit("CHANGEISIN");
  }
}

// 提交订单
function onSubmit() {
  if (checked.value.length) {
    const orderList = deleteLogic();
    store.commit("CREATEORDER", orderList);
    router.push({ path: "/createorder", query: { name: checked.value } });
  } else {
    showToast("请选择要购买的商品");
  }
}
onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.cartDetail {
  margin: 10px;
  .submitOrder {
    position: fixed;
    width: 100%;
    bottom: 50px;
  }
  .buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background: #fff;
    position: fixed;
    bottom: 50px;
    left: 0;
    width: 100%;
    .left {
      margin-left: 16px;
      font-size: 14px;
    }
    .right {
      margin-right: 16px;
      /deep/.van-button {
        width: 110px;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>
